
{% extends "base.njk" %}
{% block main %}
<style>
  body {
    background-image: url(/images/comments.webp);
    background-repeat: no-repeat; 
    background-attachment: fixed;
  }
  .comments {
    padding-top: 70px;
    padding-bottom: 32px;
  }
  .comments .title {
    vertical-align: middle;
    margin-top: 16px;
    padding: 8px 0px;
    color: #555;

  }
  .comments .item {
    vertical-align: middle;
    margin-top: 16px;
    padding: 8px 16px;
    background-color: rgba(250,250,250,0.7);
    border-radius: 20px;

  }
  .comments .item h2 {
    font-size: 28px;
    color: #333;
  }

  .comments .item p {
    color: #444;
    font-size: 16px;
  }

</style>
<div class="container">
<div class="layui-fluid">
  <div class="layui-row comments">
    <div class="title layui-col-md8 layui-col-md-offset2">
      <h2>给lu宝的留言</h2>
    </div>

    {% for comment in ui.comments %}
        <div class="item layui-col-md8 layui-col-md-offset2">
            <h2>{{comment.name}}</h2>
            <p>{{comment.content}}</p>
        </div>
    {% endfor %}
	</div>
</div>
{% endblock %}
